<!--
Gruppe: 6 - Sirui/Schlegel
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- jQuery Mobile Meta-Daten zum Scalen auf kleinen Bildschirmen -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title></title>
        
        <!-- CSS erstes Wichtig für jQuery Mobile, zweites unser eigenes Stylesheet -->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
		<link rel="stylesheet" href="base.css">

        <!-- erste Zwei sind für jQuery und jQuery Mobile, drittes für die Shake als Undo Funktionalität, viertes unser eigener Javascript-Code -->
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <script src="shake.js"></script>
        <script src="start.js"></script>
        
    </head>
    <body>
    
    <!-- Erste Seite wird mittels jQuery Mobile erstellt
         Zum Auswählen des Bildes -->
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>Select a Picture:</h1>
        </div>
        <div data-role="main" class="main">
            <div id="take-button">
                <!-- Auswählen des Bildes nur mit Unterstüzten Browsern -->
                <input type="file" id="take-picture" accept="image/*">
            </div>
        </div>
        <div data-role="footer" class="footer">
            <!-- Footer mit Links -->
            <a class="ui-btn" href="#pagetwo">Selected Picture</a>
            <a class="ui-btn-right" href="#pagefour">Help</a>
        </div>
    </div> 

    <!-- Zweite Seite zum bearbeiten des Bildes wieder mittels jQuery Mobile und 
         grundlegenden Javascript Methoden -->
    <div data-role="page" id="pagetwo">
        <div data-role="header">
            <h1>Edit markers:</h1>
        </div>
        <div data-role="main" class="main">
            <!-- Original Image, kopiertes Image zum richtigen scalen und Canvas zum bearbeiten des Bildes -->
            <img src="about:blank" alt="" id="show-picture" onload="createImageOnCanvas('show-picture','copy-picture');">
            <img src="about:blank" alt="" id="copy-picture">
            <canvas id="imgCanvas" onclick="draw('copy-picture',event)"></canvas>
            <!-- Buttons zum bearbeiten des Bildes undo, reset, delete -->
            <a href="javascript:void(0)" onclick="undo()" style="position: absolute; top: 10%; left: 0px; background-image: url(images/undo.png); background-size: 24px; width: 24px; height: 24px;"></a>
            <a href="javascript:void(0)" onclick="reset()" style="position: absolute; top: 20%; left: 0px; background-image: url(images/reset.png); background-size: 24px; width: 24px; height: 24px;"></a>
            <a href="javascript:void(0)" onclick="del(this)" style="position: absolute; top: 30%; left: 0px; background-image: url(images/delete.png); background-size: 24px; width: 24px; height: 24px;"></a>
        </div>
		<div data-role="footer" class="footer">
            <!-- Footer mit Links -->
			<a class="ui-btn" href="javascript:void(0)" onclick="save_pic()">Save</a>
        	<a class="ui-btn" href="#pageone">Other Picture</a>
            <a class="ui-btn-right" href="#pagefour">Help</a>
        	<p id="error"></p>
		</div>
    </div>

	<div data-role="page" id="pagethree">
        <div data-role="header">
            <h1>Finished:</h1>
        </div>
		<div data-role="main" class="main">
        	<img src="about:blank" alt="" id="picture">
		</div>
		<div data-role="footer" class="footer">
            <!-- Footer mit Links -->
        	<a class="ui-btn" href="#pagetwo">No</a>
			<a class="ui-btn" href="" download="finished_pic.png" id="fine">Yes</a>
		</div>
    </div> 
    
    <div data-role="page" id="pagefour">
        <div data-role="header">
            <h1>Help:</h1>
        </div>
		<div data-role="main" class="main">
        	<p>
                First Page:<br>
                - select a Picture either from Camera or from your Photos.<br>
                - Selected Picture, go to the second Page<br>
                <br>
                Second Page:<br>
                - Tap to draw a red point on the tapped place<br>
                - Left Panel: red arrow ( undo last action ), blue arrow ( reset picture )<br>
                - Left Panel: red cross - toggle changes to green ( changes tap to delete red tapped things )<br>
                - Shake to undo<br>
                - Other Picture, go to the first Page<br>
                - Save, go to the third Page<br>
                <br>
                Third Page:<br>
                - No, go back to the second page<br>
                - Yes, the picture will be downloaded to your device<br>
            </p>
		</div>
		<div data-role="footer" class="footer">
            <!-- Footer mit Links -->
        	<a class="ui-btn" href="javascript:void(0)" onclick="window.history.back();">Back</a>
		</div>
    </div> 

    <script src="base.js"></script>
    </body>
</html>
